<template>
    <div>
        <mt-field label="手机号码" placeholder="请输入手机号" type="tel" v-model="username"></mt-field>
        <mt-field label="登录密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
        <mt-button type="primary" size="large" v-on:click="sendLoginInfo">登录</mt-button>
        <mt-button type="primary" size="large" v-on:click="register" plain>注册</mt-button>
        <mt-button type="primary" size="large" v-on:click="goBack" plain>返回</mt-button>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';

export default {
    name: 'Login',
    data() {
        return {
            username: "",
            password: "",
            userIdInfo: {}
        }
    },
    methods: {
        sendLoginInfo() {
            if(!this.username || !this.password) {
                alert("手机号或者密码为空");
                return;
            }
            fetch(this.url+"/login",{
                credentials: 'include',
                method: 'POST',
                body: `username=${this.username}&password=${this.password}`,
                headers:{
                    'Content-Type':'application/x-www-form-urlencoded',
                }
            }).then((res)=>{return res.text()})
            .then((value)=>{
                value = JSON.parse(value)["data"];
                if(value[0] > 0) {
                    Toast('登录成功');
                    this.userIdInfo = {"uid":value[0],"phone":this.username};
                    this.$router.push('/user');
                }
                else {
                    Toast('登录失败');
                }
            }).catch(function(err) {
                Toast('connect error',err);
            });
        },
        register() {
            this.$router.push('/register');
        },
        goBack() {
            this.$router.back()
        }
    }
} 
</script>

<style scoped>
    div {
        padding: 100px 0 0 0;
        height: 50%;
        text-align: center;
    }
    button {
        top: 50%;
        width: 90%;
        margin: 10px 20px 0 20px;
    }
</style>